<template>
  <div>
    <div class="addcourse-bottom">
      <div class="title">编辑课程</div>
      <div class="bottom-content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="课程名称：" prop="course_name" style="width: 400px">
            <el-input v-model="ruleForm.course_name" placeholder="请输入课程名称"></el-input>
          </el-form-item>
          <el-form-item label="所属班级：" prop="class">
            <el-select v-model="valueClass" placeholder="请选择" @change="classChange">
              <el-option
                v-for="item in optionsClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="水平：" prop="class">
            <el-select v-model="valueLevel" placeholder="请选择" @change="levelChange">
              <el-option
                v-for="item in optionsLevel"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属章节：" prop="class">
            <el-select v-model="valueChapter" placeholder="请选择" @change="chapterChange">
              <el-option
                v-for="item in optionsChapter"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字：" prop="word" style="width: 400px" class="word">
            <el-input v-model="ruleForm.word" placeholder="请输入字数"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="languague">
            <el-select v-model="valueLang" placeholder="请选择">
              <el-option
                v-for="item in optionsLang"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上课时间">
            <el-col :span="11" style="width: 169px">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.data"
                style="width: 100%;"
                align="left"
                @change="DataChange"
                format="yyyy-MM-dd "
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-col>
            <el-select
              v-model="ruleForm.valueWeek"
              placeholder="请选择周"
              class="data-select"
              @change="weekChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程详情头图：" style="white-space: nowrap">
            <el-upload
              accept="video"
              class="avatar-uploader"
              action="http://yaya.izhixiu.cn/api/common/uploadVideo"
              :show-file-list="false"
              :on-success="handleAudioSuccess"
            >
              <el-button
                style="width: 120px; background: #e9e9e9; border:none; color: #444"
                size="small"
                type="success"
              >上传视频</el-button>
            </el-upload>
            <img v-if="fileList.video_cover" :src="fileList.video_cover" class="avatar" />
            <i v-else class="el-icon-picture avatar-uploader-icon"></i>
          </el-form-item>
          <el-form-item label="课程介绍:">
            <Ueditor ref="ue"></Ueditor>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import Ueditor from "@/common/editor/editor";
import { chooseLevel, chooseChapter, chooseLang } from "@/api/operation";
import { ERR_OK } from "@/api/config";
export default {
  name: "CourseMessage",
  data() {
    return {
      description: [],
      optionsData: [],
      valueChapter: "",
      optionsChapter: [],
      valueLang: "",
      optionsLang: [],
      valueLevel: "",
      optionsLevel: [],
      valueClass: "",
      optionsClass: [
        {
          value: "1",
          label: "萌芽班"
        },
        {
          value: "2",
          label: "小草班"
        },
        {
          value: "3",
          label: "灌木班"
        },
        {
          value: "4",
          label: "大树班"
        }
      ],
      options: [
        {
          value: "周一",
          label: "周一"
        },
        {
          value: "周二",
          label: "周二"
        },
        {
          value: "周三",
          label: "周三"
        },
        {
          value: "周四",
          label: "周四"
        },
        {
          value: "周五",
          label: "周五"
        },
        {
          value: "周六",
          label: "周六"
        },
        {
          value: "周日",
          label: "周日"
        }
      ],
      imageUrl: "",
      ruleForm: {
        course_name: "",
        class: "",
        languague: "",
        word: "",
        data: "",
        valueWeek: ""
      },
      rules: {
        course_name: [
          { required: true, message: "请输入课程名称", trigger: "blur" },
        ],
        class: [{ required: true, message: "请选择班级", trigger: "blur" }],
        languague: [{ required: true, message: "请选择语言", trigger: "blur" }],
        word: [{ required: true, message: "请输入字数", trigger: "blur" }],
        data: [{ required: true, message: "请选择上课时间", trigger: "blur" }],
        valueWeek: [{ required: true, message: "请选择星期", trigger: "blur" }]
      },
      fileList: {},
      params: {
        course_name: '', // 课程名称
        course_class_id: '', // 班级id
        course_chapter_id: '', // 章节id
        course_level_id: '', // 水平id
        num: '', // 字
        course_type_id: '', // 类型id
        course_start_time: '', // 上课时间 日期
        course_time: '', // 上课时间 星期
        course_cover_url: '', //	课程详情图
        course_video_url: '', // 	视频
        description: '' // 课程介绍

      }
    };
  },
  methods: {
    handleAudioSuccess(res) {
      console.log(res)
      this.fileList = res

    },
    weekChange(val) {
      // console.log(val)
      this.optionsData.push({ course_time: val });
    },
    DataChange() {
      // console.log(this.ruleForm.data)
      this.optionsData.push({ course_start_time: this.ruleForm.data });
    },
    chapterChange() {
      this._chooseLang();
    },
    levelChange(id) {
      // console.log(id)
      this.optionsChapter = [];
      this.valueChapter = "";
      this._chooseChapter(id);
    },
    classChange(id) {
      // console.log(id)
      this.optionsLevel = [];
      this.valueLevel = "";
      this._chooseLevel(id);
    },
    formatParams() {
      // let content = this.$refs.ue.getUEContent();
      // this.$notify({
      //   title: '获取成功，可在控制台查看！',
      //   message: content,
      //   type: 'success'
      // });
      let content = this.$refs.ue.content
      this.description.push({description: content})
      // this.$emit("getContent", content);
      // console.log(this.description)
      this.params.course_name = this.ruleForm.course_name
      this.params.course_class_id =  this.valueClass
      this.params.course_chapter_id = this.valueChapter
      this.params.course_level_id = this.valueLevel
      this.params.num = this.ruleForm.word
      this.params.course_type_id = this.valueLang
      this.params.course_start_time = this.ruleForm.data
      this.params.course_time = this.ruleForm.valueWeek
      this.params.course_cover_url = this.fileList.video_cover
      this.params.course_video_url = this.fileList.dest
      this.params.description = this.description[0].description
      // console.log(this.params)
      this.$emit('sendParams', this.params)
      
    },
    formatArray(list, arr, valueName, labelName) {
      list.forEach(item => {
        arr.push({
          value: item[`${valueName}`],
          label: item[`${labelName}`]
        });
      });
    },
    _chooseLevel(id) {
      chooseLevel(id)
        .then(res => {
          if (res.code == ERR_OK) {
            // console.log(res)
            let ret = res.data.list;
            this.formatArray(
              ret,
              this.optionsLevel,
              "class_relationship_id",
              "level"
            );
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _chooseChapter(id) {
      chooseChapter(id)
        .then(res => {
          if (res.code == ERR_OK) {
            console.log(res);
            let ret = res.data.list;
            this.formatArray(ret, this.optionsChapter, "id", "chapter_name");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _chooseLang() {
      chooseLang()
        .then(res => {
          if (res.code == ERR_OK) {
            console.log(res);
            let ret = res.data.list;
            this.formatArray(ret, this.optionsLang, "id", "type_name");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  components: {
    Ueditor
  }
};
</script>
<style lang="scss" scoped>
.addcourse-bottom {
  padding: 20px;
  position: relative;
  top: 135px;
}
.title {
  margin-bottom: 20px;
}
.data-select {
  margin-left: 7px;
}
.word /deep/ .el-input__inner {
  width: 200px;
  height: 40px;
}
// .el-date-picker /deep/ .el-picker-panel {
//   position: absolute;
//   top: 439px;
// }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.el-icon-picture {
  background: #ccc;
}
</style>